<template>
	<view class="celebritylife">
		<view class="celebrity_top" :style="{backgroundImage:'url('+photo_cdn+celebrity_info.photo+')'}">
			<view class="inner"></view>
			<view class="celebrity_info_img">
				<image class="celebrity_info_img_tag" :src="photo_cdn+celebrity_info.photo" mode="aspectFill"></image>
			</view>
			<view class="celebrity_name">{{celebrity_info.name}}</view>
			<view class="celebrity_tag">
				<view class="celebrity_tag_box" v-for="(item,index) in tagList" :key="index">
					<view class="celebrity_tag_item">
						<view class="celebrity_tag_img" :style="{backgroundImage:'url('+photo_cdn+item.img+')'}"></view>	
					</view>
					<view class="celebrity_tag_name">{{item.name}}</view>
				</view>
				
			</view>
		</view>
		<view class="celebrity_foot">
			<view class="foot_info">
				<view class="foot_info_title">简介</view>
				<view class="foot_info_text">{{displayText}}</view>
				<view class="deploy_img" v-if="!expanded && celebrity_info.ext3 && celebrity_info.ext3.length > limit"  @tap="expanded = true" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240104/5617756593015e1de1.png)'}"></view>
				<view class="deploy_img" v-if="expanded && celebrity_info.ext3 && celebrity_info.ext3.length > limit"  @tap="expanded = false" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240104/258d1c989517a6c955.png)'}"></view>		
			</view>
			
			<view class="foot_info">
				<view class="foot_info_tag">
					<view class="foot_info_title">基础资料</view>
					<view class="infotxt">更多  ></view>
				</view>
				<view class="foot_info_tag">
					<view class="foot_infotxt">主要成就</view>
					<view class="infotxt">{{celebrity_info.ext11 || ''}}</view>
				</view>
				<view class="foot_info_tag">
					<view class="foot_infotxt">主要领域</view>
					<view class="infotxt">{{celebrity_info.ext10 || ''}}</view>
				</view>

				<view class="foot_info_tag">
					<view class="foot_infotxt">出生时间</view>
					<view class="infotxt">{{celebrity_info.ext1 || ''}}</view>
				</view>
				<view class="foot_info_tag">
					<view class="foot_infotxt">出生地区</view>
					<view class="infotxt">{{celebrity_info.ext9 || ''}}</view>
				</view>
				<view class="foot_info_tag">
					<view class="foot_infotxt">别称</view>
					<view class="infotxt">{{celebrity_info.ext15 || ''}}</view>
				</view>
				<view class="foot_info_tag">
					<view class="foot_infotxt">祖籍</view>
					<view class="infotxt">>{{celebrity_info.ext16 || ''}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {familyPeopleInfo} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {
		photo_cdn
	} = config.baseUrl;
	export default {
		data(){
			return {
				photo_cdn,
				people_id:0,
				celebrity_info:{},
				limit:120,
				expanded: false,
				tagList:[
					{
						name:'资料库',
						img:'zpupload/20240105/7a61581ed12c37f4a7.png'
					},
					{
						name:'族谱',
						img:'zpupload/20240105/a802dbd62a00aeb3a5.png'
					},
					{
						name:'千古流芳',
						img:'zpupload/20240105/93211e2725a6fe485e.png'
					},
					{
						name:'相关作品',
						img:'zpupload/20240104/504afc8c19cb94f1c6.png'
					}
				]
			}
		},
		computed:{
			displayText(){
				if(this.expanded){
					return this.celebrity_info.ext3
				}else{
					if(this.celebrity_info.ext3){
						if(this.celebrity_info.ext3.length>this.limit) {
							return this.celebrity_info.ext3.slice(0,this.limit) + '...'
						}else{
							return this.celebrity_info.ext3
						}
					}
					
				}
			},
		},
		onLoad(option) {
			this.people_id = option.people_id?option.people_id:"";
			this.familyPeopleInfofun();
		},
		methods:{
			familyPeopleInfofun(){
				familyPeopleInfo({
					people_id:this.people_id,
					type:1
				}).then((res)=>{
					if(res.code==1){
						this.celebrity_info = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./celebritylife.scss"
</style>